<template>
    <el-container class="content" v-loading="loading">
        <el-main>
            <el-container class="white-block full">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <div class="tips" v-if="time">排班调整后会在 {{time}} 生效</div>
                        </div>
                        <div class="text-right">
                            <el-button type="primary" size="small" @click="save">保存</el-button>
                        </div>
                    </div>
                </el-header>
                <el-container class="box">
                    <el-aside class="deptList" width="220px">
                        <div v-for="(item,index) in deptList" :key="index" class="list"
                             :class="{active: currentDept&&currentDept.value==item.value}" @click="chooseDept(item)">
                            {{item.name}}
                        </div>
                    </el-aside>
                    <el-main>
                        <table-example ref="table" :data="schedule" :tableColumn="header" :slotColumns="slotColumns"
                                       class="schedule" :height="'100%'" v-if="currentDept" :border="true">
                            <template slot="name" slot-scope="scope">
                                <div class="name">
                                    {{scope.row.name}}
                                </div>
                            </template>
                            <template slot="morning" slot-scope="scope">
                                <div class="morning">
                                    <div class="empty" v-if="!getDoctors(scope.row.settingDay[0])"
                                         @click="chooseTime(scope.row.settingDay[0])">请点击排班
                                    </div>
                                    <div class="doctor-selected" v-else>
                                        <el-popover v-for="(item,index) in scope.row.settingDay[0].doctors"
                                                    :key="index" v-if="item.checked"
                                                    placement="right"
                                                    width="180"
                                                    trigger="click">
                                            <div v-for="(list,index) in item.visits" :key="index" class="pop-visit"
                                                 v-if="list.checked">
                                                <span class="time">{{list.time}}</span> 接诊数 <span class="num">{{list.num}}</span>
                                            </div>
                                            <div class="list" slot="reference">{{doctors[item.doctorId].name}}</div>
                                        </el-popover>

                                        <div class="edit" @click="chooseTime(scope.row.settingDay[0])">
                                            <i class="el-icon-edit"></i>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template slot="afternoon" slot-scope="scope">
                                <div class="afternoon">
                                    <div class="empty" v-if="!getDoctors(scope.row.settingDay[1])"
                                         @click="chooseTime(scope.row.settingDay[1])">请点击排班
                                    </div>
                                    <div class="doctor-selected" v-else>

                                        <el-popover v-for="(item,index) in scope.row.settingDay[1].doctors"
                                                    :key="index" v-if="item.checked"
                                                    placement="right"
                                                    width="180"
                                                    trigger="click">
                                            <div v-for="(list,index) in item.visits" :key="index" class="pop-visit"
                                                 v-if="list.checked">
                                                <span class="time">{{list.time}}</span> 接诊数 <span class="num">{{list.num}}</span>
                                            </div>
                                            <div class="list" slot="reference">{{doctors[item.doctorId].name}}</div>
                                        </el-popover>

                                        <!--                                        <div class="list" v-for="(item,index) in scope.row.settingDay[1].doctors"-->
                                        <!--                                             :key="index" v-if="item.checked">-->
                                        <!--                                            {{doctors[item.doctorId].name}}-->
                                        <!--                                        </div>-->
                                        <div class="edit" @click="chooseTime(scope.row.settingDay[1])">
                                            <i class="el-icon-edit"></i>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </table-example>
                        <div v-else class="deptEmpty">请先选择科室</div>
                    </el-main>
                </el-container>
            </el-container>
        </el-main>
        <dialog-msk :title="''" :show.sync="showDialog" ref="scheduleEdit" :width="'50%'" @save="saveDialog"
                    @cancel="closeDialog" :customClass="'schedule-dialog'">
            <div class="dialog">
                <div class="title">可排班医生</div>
                <div class="doctor-list">
                    <div v-for="(item,index) in currentSchedule" :key="index" class="list"
                         :class="{active: item.selected}" @click="chooseDoctor(item)">
                        <el-avatar :size="30" :src="'/_api'+doctors[item.doctorId].avatar" @error="errorHandler">
                            <img src="../../static/images/doctor.png">
                        </el-avatar>
                        <div class="name">
                            {{doctors[item.doctorId].name}}
                        </div>
                        <i class="iconfont icon-badge badge" v-if="item.checked"></i>
                    </div>
                </div>
                <div class="title">选择时段/接诊数</div>
                <div class="schedule-list clearfix" v-if="currentDoctor">
                    <div class="visits">
                        <div v-for="(list,index) in currentDoctor.visits" :key="index" class="visit">
                            <el-checkbox v-model="list.checked">
                            </el-checkbox>
                            <span class="time">{{list.time}}</span>接诊数
                            <el-input-number v-model="list.num" size="mini" :min="0"
                                             :controls="false"></el-input-number>
                        </div>
                    </div>
                    <div class="month">
                        <el-checkbox-group v-model="currentDoctor.months" @change="changeMonth">
                            <el-checkbox :label="list.value" v-for="(list,index) in months" :key="index">{{list.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="title">已选择</div>
                <div class="check-list">
                    <div v-for="(item,index) in currentSchedule" :key="index" class="list clearfix" v-if="item.checked"
                         @click="chooseDoctor(item)">
                        <div class="info">
                            <el-avatar :size="40" :src="'/_api'+doctors[item.doctorId].avatar" @error="errorHandler">
                                <img src="../../static/images/doctor.png">
                            </el-avatar>
                            <div class="name">
                                {{doctors[item.doctorId].name}}
                            </div>
                        </div>
                        <div class="visits">
                            <div v-for="(list,index) in item.visits" :key="index" class="visit" v-if="list.checked">
                                <span class="time">{{list.time}}</span> 接诊数 <span class="num">{{list.num}}</span>
                            </div>
                        </div>
                        <div class="trash" @click="trashDoctor(item)"><i class="el-icon-error"></i></div>
                    </div>
                </div>
            </div>
        </dialog-msk>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            return {
                schedule: [
                    {
                        name: '周一',
                        settingDay: []
                    },
                    {
                        name: '周二',
                        settingDay: []
                    },
                    {
                        name: '周三',
                        settingDay: []
                    },
                    {
                        name: '周四',
                        settingDay: []
                    },
                    {
                        name: '周五',
                        settingDay: []
                    },
                    {
                        name: '周六',
                        settingDay: []
                    },
                    {
                        name: '周日',
                        settingDay: []
                    }
                ],
                morningList: [
                    {
                        time: '08:00-09:00',
                        num: 1,
                        checked: false
                    },
                    {
                        time: '09:00-10:00',
                        num: 1,
                        checked: false
                    },
                    {
                        time: '10:00-11:00',
                        num: 1,
                        checked: false
                    }
                ], // 上午时间段
                afternoonList: [
                    {
                        time: '13:00-14:00',
                        num: 1,
                        checked: false
                    },
                    {
                        time: '14:00-15:00',
                        num: 1,
                        checked: false
                    }
                ], // 下午时间段
                header: [
                    {
                        prop: 'name',
                        label: '',
                        minWidth: '60',
                        align: 'center'
                    },
                    {
                        prop: 'morning',
                        label: '上午',
                        minWidth: '320',
                        align: 'center'
                    },
                    {
                        prop: 'afternoon',
                        label: '下午',
                        minWidth: '320',
                        align: 'center'
                    }
                ],
                slotColumns: ['name', 'morning', 'afternoon'],
                showDialog: false,
                doctors: {}, // 医生信息
                deptList: [], // 科室列表
                currentDept: null, // 当前选中科室
                currentSchedule: null, // 当前选中时间段医生列表-深复制
                currentScheduleCopy: null, // 当前选中时间段医生列表-浅复制
                currentDoctor: null, // 弹窗内当前选中医生
                months: [
                    {
                        name: '1月',
                        checked: false,
                        value: 1
                    },
                    {
                        name: '2月',
                        checked: false,
                        value: 2
                    },
                    {
                        name: '3月',
                        checked: false,
                        value: 3
                    },
                    {
                        name: '4月',
                        checked: false,
                        value: 4
                    },
                    {
                        name: '5月',
                        checked: false,
                        value: 5
                    },
                    {
                        name: '6月',
                        checked: false,
                        value: 6
                    },
                    {
                        name: '7月',
                        checked: false,
                        value: 7
                    },
                    {
                        name: '8月',
                        checked: false,
                        value: 8
                    },
                    {
                        name: '9月',
                        checked: false,
                        value: 9
                    },
                    {
                        name: '10月',
                        checked: false,
                        value: 10
                    },
                    {
                        name: '11月',
                        checked: false,
                        value: 11
                    },
                    {
                        name: '12月',
                        checked: false,
                        value: 12
                    }
                ],
                loading: false,
                time: null, // 排班生效时间
                isOpen: false // 是否打开过弹窗
            }
        },
        computed: {
            // time() {
            //     return this.$filter.timeFormat(new Date((new Date()).getTime() + 9 * 3600 * 24 * 1000), 'YYYY-MM-DD')
            // }
        },
        mounted() {
            this.getDeptList()
        },
        methods: {
            getDeptList() {
                this.$http.get('/expertsSchedule/departmentInfo').then(result => {
                    if (result.success) {
                        this.deptList = result.data
                    }
                })
            },
            getSchedule() {
                this.loading = true
                this.$http.get('/expertsSchedule/getData', {
                    dept: this.currentDept && this.currentDept.value
                }).then(result => {
                    if (result.success) {
                        this.doctors = result.data.doctors
                        this.schedule.forEach((e, index) => {
                            // e.morning = result.data.settings[index].settingDay[0]
                            // e.afternoon = result.data.settings[index].settingDay[1]
                            e.settingDay = result.data.settings[index].settingDay
                        })
                    }
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            chooseDept(dept) {
                let _this = this
                if (this.isOpen) {
                    this.$method.messageBox('confirm', '是否保存当前科室排班信息', (action, instance) => {
                        if (action === 'confirm') {
                            _this.save(() => {
                                _this.currentDept = dept
                                _this.isOpen = false
                                _this.getSchedule()
                            })
                        } else {
                            this.currentDept = dept
                            this.isOpen = false
                            this.getSchedule()
                        }
                    }, '', false, false)
                } else {
                    this.currentDept = dept
                    this.isOpen = false
                    this.getSchedule()
                }
            },
            getDoctors(list) {
                let num = 0
                if (list && list.doctors) {
                    list.doctors.map(e => {
                        if (e.checked) num++
                    })
                }
                return num > 0
            },
            chooseTime(row) {
                let _this = this
                this.currentSchedule = JSON.parse(JSON.stringify(row.doctors))
                this.currentScheduleCopy = row
                this.showDialog = true
                this.isOpen = true
                this.$nextTick(() => {
                    let show = false
                    this.currentSchedule.forEach(e => {
                        if (e.checked && !show) {
                            show = true
                            _this.chooseDoctor(e)
                        }
                    })
                })
            },
            chooseDoctor(row) {
                this.currentSchedule.map(e => {
                    e.selected = false
                    return e
                })
                row.checked = true
                row.selected = true
                if (!row.special) {
                    row.months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                }
                this.currentDoctor = row
            },
            saveDialog() {
                this.currentScheduleCopy.doctors = this.currentSchedule
                this.closeDialog()
            },
            closeDialog() {
                this.showDialog = false
                this.$nextTick(() => {
                    this.currentSchedule = null
                    this.currentDoctor = null
                })
            },
            save(callback) {
                if (this.currentDept && this.currentDept.value) {
                    this.loading = true
                    this.$http.post('/expertsSchedule/saveData', {
                        dept: this.currentDept.value,
                        settings: this.schedule
                    }).then(result => {
                        this.loading = false
                        if (result.success) {
                            this.isOpen = false
                            this.time = result.data
                            this.$message.success({
                                message: '保存排班成功',
                                showClose: true
                            })
                            if (callback) callback()
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                }
            },
            errorHandler() {
                return true
            },
            trashDoctor(row) {
                let _this = this
                this.$method.messageBox('confirm', '确定要删除该医生吗', (action, instance) => {
                    if (action === 'confirm') {
                        row.checked = false
                        row.selected = false
                        _this.currentDoctor = null
                    }
                }, '', false, false)
            },
            changeMonth(months) {
                if (months.length !== 12) {
                    this.currentDoctor.special = true
                } else {
                    this.currentDoctor.special = false
                }
            }
        },
        components: {
            tableExample,
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .content {
        .toolbar {
            > div {
                height: 42px;

                > * {
                    margin-bottom: 0;
                }

                .tips {
                    display: block;
                    font-size: 16px;
                    line-height: 32px;
                    /*color: #999;*/
                }
            }

        }

        /deep/ .box {
            height: calc(100% - 42px);

            .deptList {
                border: 1px solid #eee;
                border-right: 0 none;
                /*padding: 10px 0;*/

                .list {
                    padding: 5px 15px;
                    line-height: 24px;
                    cursor: pointer;
                    border-bottom: 1px solid #f5f5f5;
                    font-size: 14px;

                    &.active {
                        background-color: #4995f4;
                        color: #fff;
                    }
                }
            }

            .schedule {
                /*border: 1px solid #eee;*/
                /*border-bottom: 0 none;*/

                &::before {
                    display: none;
                }

                td, .cell {
                    padding: 0;
                }

                th {
                    /*background-color: transparent;*/
                }

                &.el-table--enable-row-hover {
                    .el-table__body tr:hover td {
                        background-color: transparent;
                    }
                }

                .name, .morning, .afternoon {
                    min-height: 120px;
                }

                .empty {
                    line-height: 120px;
                }

                .name {
                    background-color: #F5F8FB;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .empty {
                    color: #999;
                    cursor: pointer;

                    /*&:hover {*/
                    /*    background-color: #F5F8FB;*/
                    /*}*/
                }

                /*.morning {*/
                /*    border-right: 1px solid #eee;*/
                /*}*/

                .morning, .afternoon {
                    .doctor-selected {
                        padding: 10px;

                        .edit {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 40px;
                            line-height: 24px;
                            text-align: center;
                            background-color: #4995f4;
                            color: #fff;
                            cursor: pointer;
                        }
                    }
                }

                .doctor-selected {
                    text-align: left;

                    .list {
                        display: inline-block;
                        width: 90px;
                        height: 36px;
                        line-height: 36px;
                        margin-bottom: 10px;
                        text-align: center;
                        background-color: #f5f5f5;
                        border-radius: 3px;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }
            }

            .deptEmpty {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #999;
                height: 100%;
                border: 1px solid #eee;
            }
        }

        /deep/ .schedule-dialog {
            min-width: 650px;

            .dialog {
                max-height: 500px;
                overflow-y: auto;
            }

            .title {
                font-size: 15px;
                font-weight: bolder;
                line-height: 50px;
            }

            .doctor-list {
                /*max-height: 90px;*/
                /*overflow-y: auto;*/

                .list {
                    display: inline-block;
                    width: 115px;
                    margin-bottom: 10px;
                    text-align: center;
                    background-color: #f5f5f5;
                    border-radius: 3px;
                    margin-right: 10px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    border: 1px solid #f5f5f5;
                    padding: 5px 3px 5px 10px;
                    text-align: left;

                    .badge {
                        position: absolute;
                        top: 0;
                        right: 0;
                        line-height: 1;
                        color: #4995f4;
                    }

                    .el-avatar, .name {
                        display: inline-block;
                        vertical-align: top;
                        line-height: 30px;
                    }

                    .el-avatar {
                        margin-right: 3px;
                    }

                    &.active {
                        border-color: #4995f4;
                    }
                }
            }

            .schedule-list {
                > div {
                    float: left;
                    width: 50%;
                    padding: 0 20px;
                }

                .visits {
                    position: relative;

                    .visit {
                        margin-bottom: 8px;

                        .time {
                            display: inline-block;
                            width: 85px;
                        }

                        .el-input-number {
                            width: 40px;
                            margin-left: 5px;

                            input {
                                padding: 0 5px;
                            }
                        }
                    }

                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 20px;
                        width: 1px;
                        height: 100%;
                        background-color: #d9d9d9;
                    }
                }

                .el-checkbox-group {
                    .el-checkbox {
                        width: 56px;
                        margin: 4px 7px 4px 0;
                    }
                }
            }

            .check-list {
                .list {
                    display: flex;
                    width: 100%;
                    padding: 10px 20px;
                    position: relative;
                    border: 1px solid #eee;
                    border-radius: 3px;
                    margin-bottom: 8px;
                    align-items: center;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .info {
                        float: left;
                        width: 150px;

                        .name {
                            display: inline-block;
                            vertical-align: top;
                            margin-left: 10px;
                            line-height: 40px;
                        }
                    }

                    .visits {
                        width: calc(100% - 200px);

                        .visit {
                            display: inline-block;
                            width: 30%;
                            min-width: 150px;

                            .time {
                                display: inline-block;
                                width: 80px;
                            }
                        }
                    }

                    .trash {
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        font-size: 18px;
                        margin-top: -19px;
                        padding: 5px;
                        cursor: pointer;
                        color: #FF3B3B;
                    }
                }
            }
        }

    }

    .pop-visit {
        /*display: inline-block;*/
        /*width: 30%;*/
        min-width: 150px;

        .time {
            display: inline-block;
            width: 80px;
        }
    }
</style>
